<template>
	<view class="container">
		<view class="custom-search-border">
			<view class="uni-slect-view">
				<uni-row :gutter="2" class="uni-row-select">
					<uni-col :span="11">
						<view class="uni-select-col">
						<uni-data-select
							v-model="queryParams.category"
							placeholder="区域"
							:localdata="areaList"
							@change="ruleTypeChange"
							:clear="false"
						></uni-data-select>
						</view>
					</uni-col>
					<uni-col :span="11">
						<view class="uni-select-col">
							<uni-data-select
								v-model="queryParams.period"
								:localdata="timeOPtion"
								@change="stateChange"
							    placeholder='工单查询'
								:clear="false"
							></uni-data-select>
						</view>
					</uni-col>
					<uni-col :span="2">
						<view class="uni-col-select-view"><image src="/static/select1.png" style="width: 24px;height: 24px;margin-top: 5px;"></image></view>
					</uni-col>
				</uni-row>
			</view>
		</view>
		<scroll-view
			class="scroll-view"
			scroll-y
			@scrolltolower="handleScrollToLower"
		>
			<uni-card
				class="uni-card-list"
				v-for="(item, index) in equipmentList"
				:key="index"
				@click="handlerExecute(item)"
			>
				<view style="display: flex; align-items: center">
					<view style="width: 100%;">
						<view>
							<view class="title">{{ index + 1 }}.{{ item.orderName }}</view>
						</view>
						<view style="margin-top: 8px;padding-right: 8px;">
							<uni-row :gutter="10">
								<uni-col :span="12">
									<view class="header-shop-left">区域： {{ item.orderAreaName }}</view>
								</uni-col>
								<uni-col :span="12">
									<view class="header-shop-right">点检类型： {{ item.planTypename }}</view>
								</uni-col>
							</uni-row>
							<uni-row :gutter="10">
								<uni-col :span="24">
									<view class="header-infor-left">计划时间： {{ item.startTime }} - {{ item.endTime }}</view>
								</uni-col>
							</uni-row>
							<uni-row :gutter="10">
								<uni-col :span="12">
									<view class="header-infor-left">执行人： {{ item.updateBy || '-' }}</view>
								</uni-col>
								<uni-col :span="12">
									<view class="header-infor-right">
										<order-tag
											class="arrow-button"
											:orderStatus="item.inspectionStatus"
										/>
									</view>
								</uni-col>
							</uni-row>
						</view>
						<!-- <view class="right-edit">
							<order-tag
								class="arrow-button"
								:orderStatus="item.inspectionStatus"
							/>
						</view>
						<desc-content
							style="width: 75%"
							:columns="columns"
							:data="item"
						></desc-content> -->
					</view>
				</view>
			</uni-card>
			<page-loading style="padding-top: 30rpx" :status="loadingStatus" />
		</scroll-view>
	</view>
</template>

<script>
import { getTagStyle } from '@/utils/common.js';
import { post, postForm } from '../../utils/request.js';
import { getDeviceCheckList } from '@/api/check.js';
export default {
	data() {
		return {
			areaList: [
				{
					value: '4',
					text: '加热',
				},
				{
					value: '2',
					text: '粗轧',
				},
				{
					value: '3',
					text: '精轧',
				},
				{
					value: '4',
					text: '卷取',
				},
			],
			timeOPtion: [
				{
					value: 'active',
					text: '本期工单',	
				},
				{
					value: 'archived',
					text: '历史工单',	
				}
			],
			currentRecord: {},
			reason: '',
			showError: false,
			showPopup: false,
			title: '',
			range: [],
			dataTree: [],
			// 表单参数
			columns: [
				{
					title: '区域',
					dataIndex: 'orderAreaName',
					span: 2,
				},
				{
					title: '计划开始时间',
					dataIndex: 'startTime',
					span: 2,
				},
				{
					title: '计划结束时间',
					dataIndex: 'endTime',
					span: 2,
				},
				{
					title: '点检类型',
					dataIndex: 'planTypename',
					span: 2,
				},
				{
					title: '执行人',
					dataIndex: 'updateBy',
					span: 2,
				},
			],
			equipmentList: [],
			// 查询参数
			queryParams: {
				category: 0,
				period: 'active',
				current: 1,
				size: 10,
			},
			total: 0,
			loadingStatus: 'more',
			scrollQuery: false,
			formDisabled: false,
			executeType: '',
			selectRow: {},
			formData3: {},
			isTG: [
				{
					text: '通过',
					value: '通过',
				},
				{
					text: '不通过',
					value: '不通过',
				},
			],
			customRules: {
				result: {
					rules: [
						{
							required: true,
							errorMessage: '请选择验收结果',
						},
					],
				},
			},
		};
	},
	computed: {
		formColumns() {
			return [
				{
					label: '是否逾期',
					prop: 'expected',
					formType: 'select',
					options: [],
				},
				{
					label: '工单编码',
					prop: 'orderCode',
				},
				{
					label: '工单名称',
					prop: 'orderName',
				},
				{
					label: '请求人员',
					prop: 'createBy',
				},
				{
					label: '请求时间',
					prop: 'createTime',
					formType: 'date',
				},
			];
		},
	},
	onShow() {
		this.scrollQuery = false;
		this.$refs.headerSearch?.handlerResetFields();
		/* this.queryParams = {
			category: 0,
			current: 1,
			size: 10,
		}; */
	},
	onLoad() {
		this.getEare()
	},
	methods: {
		getTagStyle: getTagStyle,
		getEare() {
			const userInfor = uni.getStorageSync('userInfor');
			postForm('deviceInspect/listSelect', {userId: userInfor.userId} )
			    .then(data => {
					if(data.code == 200) {
						//debugger
						let area = data.data
						let areaData = []
						for(var i = 0; i < area.length; i++) {
							if(i == 0) {
								areaData[i] = {}
								areaData[i].value = 0
								areaData[i].text = '全部'
							} 
							areaData[i+1] = {}
							areaData[i+1].value = area[i].value
							areaData[i+1].text = area[i].name
						}
						this.areaList = areaData
						this.queryParams.category = areaData[0].value
						this.getList(this.queryParams);
					} else {
						  uni.showToast({
						    icon: 'none',
						    title: data.message
						  });
					}
			    })
			    .catch(err => {
			        uni.showToast({
			           icon: 'none',
			          title: '获取数据失败，请检查接口返回'
			        });
			    });
		},
		ruleTypeChange() {
			this.scrollQuery = false;
			this.queryParams.current = 1;
			this.getList({
				...this.queryParams,
				current: 1,
				size: 10,
			});
		},
		stateChange() {
			this.scrollQuery = false;
			this.queryParams.current = 1;
			this.getList({
				...this.queryParams,
				current: 1,
				size: 10,
			});
		},
		handleShowNoMore(data, total) {
			if (data?.length === total) {
				this.loadingStatus = 'noMore';
			}
		},
		handleScrollToLower() {
			if (this.loadingStatus === 'noMore') {
				return;
			}
			this.scrollQuery = true;
			this.queryParams.current = this.queryParams.current + 1;
			this.getList(this.queryParams);
		},
		async getList(
			form = {
				curret: 1,
				size: 10,
			},
		) {
			let sendData = JSON.parse(JSON.stringify(form))
			if(sendData.category == 0) {
				sendData.category = ''
			}
			const userInfor = uni.getStorageSync('userInfor');
			const newParams = {
				...sendData,
				startTime: form?.planExecuteDate?.[0],
				endTime: form?.planExecuteDate?.[1],
				userId: userInfor.userId,
			};
			this.loadingStatus = 'loading';
			const res = await getDeviceCheckList(newParams);
			const data = res.data
			const newList = data?.records || [];
			for(var i=0; i< newList.length; i++) {
				if(newList[i].planType == 1) {
					newList[i].planTypename = '日常点检'
				} else if(newList[i].planType == 2) {
					newList[i].planTypename = '专业点检'
				} else if(newList[i].planType == 3) {
					newList[i].planTypename = '三合一点检'
				}
			}
			const total = data?.total || 0;
			this.total = total;
			this.loadingStatus = 'more';
			if (this.scrollQuery) {
				this.equipmentList = [...this.equipmentList, ...newList];
				this.handleShowNoMore(this.equipmentList, total);
			} else {
				this.equipmentList = [...newList];
				this.handleShowNoMore([...newList], total);
			}
		},
		handlerExecute(row) {
			this.formDisabled = false;
			uni.navigateTo({
				url:
					'/pages/deviceCheck/executeItem/index?data=' +
					JSON.stringify(row),
			});
		},
		confirmClose() {
			if (!this.reason) {
				this.showError = true;
				setTimeout(() => (this.showError = false), 2000);
				return;
			}
			const userInfor = uni.getStorageSync('userInfor');
			checkClose({
				closeReason: this.reason,
				planCode: this.currentRecord.planCode,
				userId: userInfor.userId,
			}).then((res) => {
				if (res.code === 200) {
					this.showPopup = false;
					uni.showToast({
						title: '关闭成功',
						icon: 'success',
					});
					this.reset();
				}
			});
		},
		onClose() {
			this.showPopup = false;
			this.reason = '';
			this.showError = false;
		},
	},
};
</script>

<style>
	page {
	  overflow: hidden;
	  height: 100%;
	}
	/* 搜索框样式 */
	.custom-search-border {
		background-color: #fff;
	  border-radius: 5px; /* 圆角 */
	  margin-bottom: 10px;
	  padding: 0px 10px;
	  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
	  /* border: 1px solid rgb(153, 153, 153); */
	}
	.uni-slect-view {
	    align-items: center;
		line-height: 36px;
		text-align: center;
		background-color: #fff;
	}
	.uni-select-col {
		background-color: #fff;
		border-radius: 5px;
	}
	.uni-card-list {
		margin-top: 5px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
	}
	.uni-card--border {
		margin-top: 5px !important;
		margin-bottom: 0px !important;
		margin-left: 0px !important;
		margin-right: 0px !important;
		padding: 15px 8px 15px 15px !important;
	}
	.uni-col-select-view {
	   display: flex;
	   align-items: center;
	   justify-content: center;
		font-size: 13px;
		color: #666;
		line-height: 36px;
	}
	.uni-select__input-text {
		color: #6a6a6a !important;
		font-size: 12px !important;
	}
</style>
<style scoped lang="scss">
.container {
	display: flex;
	flex-direction: column;
	padding: 10px;
	.filter-warp {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 8px;
	}

	.scroll-view {
		.date {
			border: 1px solid #16a7f0;
			border-radius: 10rpx;
			font-size: 24rpx;
			color: #16a7f0;
		}
	}
}

::v-deep .uni-card .uni-card__content {
	padding: 0px !important;
}

.right-edit {
	width: 17%;
	position: absolute;
	right: 0;
	top: 0rpx;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-direction: column;
	height: 100%;
	z-index: 9;

	button {
		margin-bottom: 6rpx;

		&:nth-of-type(5) {
			margin-bottom: 0;
		}
	}
}

.arrow-button {
	left: 0;
	bottom: 20rpx;
}

.right-tag {
	width: 100rpx;
	height: 24rpx;
	text-align: center;
	line-height: 26rpx;
	color: #fff;
	font-size: 16rpx;
	background-color: #e8413d;
	right: 0;
	top: 80rpx;
	position: absolute;
	right: -24rpx;
	top: 12rpx;
	transform: rotateZ(45deg);
}

.title {
	font-size: 16px;
	color: #000;
	font-weight: 400;
}
.header-infor-left {
	font-size: 14px;
	color: #000;
	margin-top: 5px;
}
.header-infor-right {
	font-size: 14px;
	text-align: right !important;
	color: #000;
	margin-top: 5px;
}
.header-shop-left {
	font-size: 14px;
	color: #000;
	margin-top: 5px;
	color: rgb(153, 153, 153) !important;
}
.header-shop-right {
	font-size: 14px;
	text-align: right !important;
	color: #000;
	margin-top: 5px;
	color: rgb(153, 153, 153) !important;
}
.button-group {
	margin-top: 15px;
	display: flex;
	justify-content: space-around;
}

::v-deep .uni-tag {
	padding: 8rpx 10rpx;
}
.custom-modal {
	background: #fff;
	padding: 30rpx;
	border-radius: 10rpx;
	width: 80vw;
	.title {
		font-size: 36rpx;
		font-weight: bold;
		margin-bottom: 30rpx;
	}

	input {
		border: 1px solid #e0e0e0;
		padding: 20rpx;
		border-radius: 8rpx;
		margin-bottom: 20rpx;
	}

	.error {
		color: #e64340;
		font-size: 24rpx;
		height: 40rpx;
	}

	.buttons {
		display: flex;
		justify-content: space-between;
		margin-top: 40rpx;
	}

	button {
		flex: 1;
		margin: 0 10rpx;
	}
}
</style>
